import React from 'react';
import { Tooltip as MuiTooltip, TooltipProps } from '@mui/material';
import { styled } from '@mui/material/styles';
import { bgDark } from '../../theme';

const StyledTooltip = styled(MuiTooltip)(({ theme }) => ({
  '& .MuiTooltip-arrow': {
    color: bgDark,
  },
  '& .MuiTooltip-tooltip': {
    backgroundColor: bgDark,
    fontSize: theme.typography.subtitle1.fontSize,
  },
}));

interface CustomTooltipProps extends TooltipProps {
  arrow?: boolean;
}

const CustomTooltip: React.FC<CustomTooltipProps> = ({ arrow = true, ...props }) => {
  return <StyledTooltip arrow={arrow} enterDelay={200} enterTouchDelay={200} disableInteractive={false} {...props} />;
};

export default CustomTooltip;

